<template>
	<view>
		<custom-header :back="false" title="送货单" />
		<view class="date_wrap" @click="isShowDatetimePicker = true">
			<view class="icon">
				<image src="/static/common/date_icon.png" mode=""></image>
			</view>
			<view class="dateVal">
				{{ selectDateTime || '今日' }}
			</view>
			<view class="right_icon">
				<image src="/static/common/bottom1.png" mode=""></image>
			</view>
		</view>
		<view class="hint_wrap">
			<up-notice-bar 
				:text="hint"
				color="#F5564D"
				bgColor="#FFEBEB"
				></up-notice-bar>
		</view>
		<view
			class="no_data" 
			:style="{height:'calc(100vh - 83rpx - 37px - 5rpx - '+statusBarHeight+'px)'}"
			v-if="!listData.length && listLoading != 'loading'">
				<view class="icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
				</view>
		</view>
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 83rpx - 37px - 120rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap"
			v-if="listData.length">
				<view class="table_wrap">
					<view class="tw_head">
						<view class="th name">花材名称</view>
						<view class="th maturity">成熟度</view>
						<view class="th length">长度</view>
						<view class="th grade">等级</view>
						<view class="th number">数量</view>
						<view class="th operation">操作</view>
					</view>
					<view class="tw_body" v-for="(item,index) in listData" :key="index">
						<view class="td name ellipsis"> {{ item.name }} </view>
						<view class="td maturity">{{ item.maturity }}</view>
						<view class="td length">{{ item.length }}</view>
						<view class="td grade ellipsis">{{ item.grade }}</view>
						<view class="td number ellipsis">{{ item.number }}</view>
						<view 
							class="td operation ellipsis" 
							hover-class="custom_hover" 
							:hover-stay-time="200"
							@click="handleDetail(item)"> 查看 </view>
					</view>
				</view>
				<view class="total_wrap">
					交易统计：共31扎
				</view>
		</scroll-view>
		<view class="loading_wrap" v-if="listLoading == 'loading'">
			<up-loadmore
				:status="listLoading"
				iconSize="22"
				iconColor="#FF3316"
				loadingIcon='semicircle'
				loadingText=""
				/>
		</view>
		<!-- 按钮 -->
		<view class="btn_wrap"  v-if="listLoading != 'loading' && listData.length">
			<view 
				class="btn"
				hover-class="confirm_hover"
				:hover-stay-time="200"
				@click="handlePrint">
				<view class="icon">
					<image src="/static/common/print_icon.png" mode=""></image>
				</view>
				<view class="text">去打印</view>
			</view>
		</view>
		
		<!-- 选择时间 -->
		<custom-select-time 
			:show="isShowDatetimePicker" 
			:defaultDate="selectDateTime"
			@close="isShowDatetimePicker = false" 
			@confirm="handleSelectTime">
		</custom-select-time>
	</view>
</template>

<script setup>
	import { ref,onMounted, computed } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const isShowDatetimePicker = ref(false);
	const selectDateTime = ref('');
	const handleSelectTime = (e)=>{
		selectDateTime.value = e;
		loadGetListData();
	};
	
	// 获取列表数据
	const listLoading = ref('loadmore')
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					
					id:1,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					name:'康乃馨-紫精灵',
					maturity:'生花',
					length:'65CM',
					grade:'A级',
					number:5
				},
				{
					
					id:1,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
				{
					
					id:1,
					name:'康乃馨-野马',
					maturity:'熟花',
					length:'55CM',
					grade:'E级',
					number:99
				},
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/deliveryNoteDetail/deliveryNoteDetail?id='+item.id
		})
	}
	const handlePrint = ()=>{
		uni.navigateTo({
			url:'/pages/deliveryNotePrint/deliveryNotePrint'
		})
	}
	const hint = '请于22:00之前送达亚拍花卉。'
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	.date_wrap{
		height: 83rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			width: 28rpx;
			height: 27rpx;
			display: flex;
		}
		.dateVal{
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding: 0 10px;
		}
		.right_icon{
			width: 20rpx;
			height: 10rpx;
			display: flex;
		}
	}
	.hint_wrap{
		// height: 56rpx;
		// background: linear-gradient(90deg, #FFF0F0 0%, #FFEBEB 100%);
	}
	.no_data{
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.table_wrap{
		font-size: 24rpx;
		.tw_head,.tw_body{
			display: flex;
			.th,.td{
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
			}
			.name{
				flex: 1;
			}
			.maturity{
				width: 100rpx;
			}
			.length{
				width: 100rpx;
			}
			.grade{
				width: 100rpx;
			}
			.number{
				width: 100rpx;
			}
			.operation{
				width: 120rpx;
			}
		}
		.tw_head{
			background: #FFFFFF;
			font-weight: bold;
			color: #333;
		}
		.tw_body{
			color: #666666;
			&:nth-child(odd){
				background: #fff;
			}
			.operation{
				color: #F5564D;
			}
		}
	}
	.total_wrap{
		color: #666666;
		font-size: 28rpx;
		text-align: right;
		padding: 20rpx;
	}
	.btn_wrap{
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 638rpx;
			height: 76rpx;
			border-radius: 108rpx;
			background: #F5564D;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 26rpx;
				height: 27rpx;
				display: flex;
			}
			.text{
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 10rpx;
			}
		}
	}
</style>
